<template>
  <div class="app-container">
    <!-- 生成充值卡 -->
    <div class="filter-container">
      <el-form ref="recharg" :rules="rules" :model="recharg" label-width="150px" :inline="true">
        <el-form-item label="制卡金额" prop="faceValue">
          <el-input v-model="recharg.faceValue" @blur="faceValueBlur(recharg.faceValue)" clearable class="filter-item" style="width: 200px;" placeholder="请输入制卡金额" />
        </el-form-item>
        <el-form-item label="制卡数量" prop="number">
          <el-input v-model="recharg.number" @blur="numberBlur" clearable class="filter-item" style="width: 200px;" placeholder="请输入制卡张数" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="creatLoading" class="filter-item" type="primary"  @click="handleCreate">生成充值卡</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-form ref="listQuery"  :model="listQuery" label-width="150px" :inline="true">
        <el-form-item label="查询卡金额" prop="faceValue">
            <el-input v-model="listQuery.faceValue" @blur="faceValueBlur(listQuery.faceValue)" clearable class="filter-item" style="width: 200px;" placeholder="请输入查询卡金额" />
        </el-form-item>
        <el-form-item label="卡状态" prop="status">
            <el-select v-model="listQuery.status" clearable placeholder="请选择卡状态">
                <el-option  value="0" label="待推广" >待推广</el-option>
                <el-option  value="1" label="未充值">未充值</el-option>
                <el-option  value="2" label="已使用">已使用</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
          <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
      <el-table-column align="center" label="卡金额" prop="faceValue" />
      <el-table-column align="center" label="卡状态" prop="status">
        <template slot-scope="scope">{{ status[scope.row.status] }} </template>
      </el-table-column>
      <el-table-column align="center" label="卡号" prop="cardNumber" />
      <el-table-column align="center" label="密码" prop="password" />
      <el-table-column align="center" label="添加时间" prop="addTime" />
      <el-table-column align="center" label="更新时间" prop="updateTime" />
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #20a0ff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 145px;
  height: 145px;
  display: block;
}
</style>

<script>
import { rechargeList, rechargeCreate } from '@/api/recharg-card'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'RechargeCard',
  components: { Pagination },
  data() {
    return {
      recharg: {
        faceValue: undefined,
        number: undefined
      },
      status: {
        '0': '待推广',
        '1': '未充值',
        '2': '已使用'
      },
      creatLoading: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        faceValue: '',
        status: ''
      },
      rules: {
        faceValue: [
          { required: true, message: '制卡金额不能为空', trigger: 'blur' }
        ],
        number: [
          { required: true, message: '制卡数量不能为空且需大于0', trigger: 'blur' }
        ]
      },
      downloadLoading: false
    }
  },
  computed: {
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      rechargeList(this.listQuery)
        .then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleCreate() {
      this.$refs.recharg.validate((valid) => {
        if (valid) {
          this.creatLoading = true
          rechargeCreate(this.recharg).then(res => {
            this.creatLoading = false
            this.$refs['recharg'].resetFields()
            this.handleFilter()
          })
            .catch(() => {
              this.$message({
                type: 'warning',
                message: '接口失败，请稍后重试'
              })
              this.creatLoading = false
            })
        }
      })
    },
    faceValueBlur(value) {
      value = value.replace(/[^\d\.]/g, '')
      // 第一位不是.
      let index = value.indexOf('.')
      index === 0 ? value = '0' + value : ''
      index = value.indexOf('.')
      value = value.substring(0, index + 3)
    },
    numberBlur() {
      this.recharg.number = this.recharg.number.replace(/[^[1-9]$/g, '')
      if(this.recharg.number !== '') {
        this.recharg.number = Number(this.recharg.number)
      }
      console.log('aa', this.recharg.number)
    },
    handleDownload() {
      // window.location.href = process.env.VUE_APP_BASE_API + `/recharge/exportExcel?faceValue=${this.listQuery.faceValue}&status=${this.listQuery.status}`
      window.location.href = `https://litemall.littlemoment.cn/admin/recharge/exportExcel?faceValue=${this.listQuery.faceValue}&status=${this.listQuery.status}`
    }
  }
}
</script>
